﻿@namespace Bit.BlazorUI
@inherits BitComponentBase

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()">

    <div @ref="_carouselContainer"
         @onpointerup="HandlePointerUp"
         @onpointerleave="HandlePointerUp"
         @onpointermove="HandlePointerMove"
         @onpointerdown="HandlePointerDown"
         @onpointerdown:preventDefault="true"
         class="bit-csl-cnt @Classes?.Container"
         style="@_directionStyle @Styles?.Container">

        <CascadingValue Value="this" IsFixed="true">
            @ChildContent
        </CascadingValue>

        @if (HideNextPrev is false)
        {
            <div @onclick="GoLeft"
                 class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
                 style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
                <i style="@Styles?.GoLeftButtonIcon"
                   class="bit-icon bit-icon--@(GoLeftIcon ?? "ChevronRight") @Classes?.GoLeftButtonIcon" />
            </div>

            <div @onclick="GoRight"
                 class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
                 style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
                <i style="@Styles?.GoRightButtonIcon"
                   class="bit-csl-rbi bit-icon bit-icon--@(GoRightIcon ?? "ChevronRight") @Classes?.GoRightButtonIcon" />
            </div>
        }
    </div>

    @if (HideDots is false)
    {
        <div class="bit-csl-dcn @Classes?.DotsContainer"
             style="@_directionStyle @Styles?.DotsContainer">
            @for (int i = 0; i < _pagesCount; i++)
            {
                int index = i;
                <div @onclick="(() => GotoPage(index))"
                     style="@Styles?.Dots"
                     class="bit-csl-dot @((_currentPage == index ? $"bit-csl-cud {Classes?.CurrectDot}" : "").Trim()) @Classes?.Dots"></div>
            }
        </div>
    }
</div>